import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import *as todoActions from '../store/actions/todo.actions'
import { getIn } from "immutable"

class Footer extends Component {
  clearTodos = () => {
    if (window.confirm('确定删除此项任务')){
      this.props.clear_todo_completed()
    }
  }
  render() {
    // console.log(this.props)
    let unCompletedLength = this.props.todos.filter(todo => !todo.isCompleted).length
    return (
      <footer className="footer">
      <span className="todo-count">
        <strong>{ unCompletedLength }</strong> item left
      </span>
      <ul className="filters">
        <li>
          <span onClick={() => this.props.modify_todo_filter('all')}>All</span>
        </li>
        <li>  
          <span onClick={() => this.props.modify_todo_filter('active')}>Active</span>
        </li>
        <li>
          <span onClick={() => this.props.modify_todo_filter('completed')}>Completed</span>
        </li>
      </ul>
      <button className="clear-completed" onClick={this.clearTodos}>Clear completed</button>
    </footer>
    )
  }
}
// 获取store中的数据
const mapStateToProps = (state) => ({
	todos: getIn(state.todoReducer, ['todos'])

	// state
})
// 处理store中的数据  触发dispatch函数
const mapDispatchToProps = (dispatch) => ({
	...bindActionCreators(todoActions, dispatch)
})

export default connect(mapStateToProps, mapDispatchToProps)(Footer)
